<template>
	<div class="data-page">
    <Row>
        <Col span="12">col-12</Col>
        <Col span="12">col-12</Col>
    </Row>
    <br>
    <Row>
        <Col span="8">col-8</Col>
        <Col span="8">col-8</Col>
        <Col span="8">col-8</Col>
    </Row>
    <br>
    <Row>
        <Col span="6">col-6</Col>
        <Col span="6">col-6</Col>
        <Col span="6">col-6</Col>
        <Col span="6">col-6</Col>
    </Row>
    <Row :gutter="16">
        <Col span="6"  v-for="(role,index) in 4" :key="index">
            <databox :title="''" :dheight="150" :icon="'account'">
               <chart-radar style="height: 150px;"  text="基础雷达图"/>
            </databox>
        </Col>
    </Row>
    <br>
    <Row :gutter="16">
        <Col span="6" v-for="(role,index) in 4" :key="index">
        <!-- <Card shadow> -->
         <databox :title="''" :dheight="150" :icon="'account'">
			 		<chart-pie style="height: 150px;" :value="pieData" text="用户访问来源"></chart-pie>
			   </databox>
         <!-- </Card> -->
        </Col>
    </Row>
    <br>
    <!-- <Row :gutter="16">
        <Col span="3" v-for="(role,index) in 8" :key="index">
           <databox :title="''" :dheight="100" :icon="'account'">
			 		   <chart-pie style="height: 100px;" :value="pieData" text="用户访问来源"></chart-pie>
			      </databox>
        </Col>
				<Col span="3" v-for="(role,index) in 8" :key="index">
           <databox :title="''" :dheight="100" :icon="'account'">
			 		   <chart-pie style="height: 100px;" :value="pieData" text="用户访问来源"></chart-pie>
			      </databox>
        </Col>
				<Col span="3" v-for="(role,index) in 8" :key="index">
           <databox :title="''" :dheight="100" :icon="'account'">
			 		   <chart-pie style="height: 100px;" :value="pieData" text="用户访问来源"></chart-pie>
			      </databox>
        </Col>
				<Col span="3" v-for="(role,index) in 8" :key="index">
           <databox :title="''" :dheight="100" :icon="'account'">
			 		   <chart-pie style="height: 100px;" :value="pieData" text="用户访问来源"></chart-pie>
			      </databox>
        </Col>
    </Row> -->

    <Row :gutter="16">
        <Col span="9" >
           <Row :gutter="16">
              <Col span="24" >
							   <databox :title="''" :dheight="200" :icon="'account'">
			 		   <chart-pie style="height: 100px;" :value="pieData" text="用户访问来源"></chart-pie>
			      </databox>
							</Col>
						</Row>
           <Row :gutter="16">
              <Col span="8" v-for="(role,index) in 3" :key="index" >
							   <databox :title="''" :dheight="100" :icon="'account'">
			 		   <chart-pie style="height: 100px;" :value="pieData" text="用户访问来源"></chart-pie>
			      </databox>
							</Col>
						</Row>
						<Row :gutter="16">
              <Col span="16" >
							   <databox :title="''" :dheight="100" :icon="'account'">
			 		   <chart-pie style="height: 100px;" :value="pieData" text="用户访问来源"></chart-pie>
			      </databox>
							</Col>
							<Col span="8" >
							   <databox :title="''" :dheight="100" :icon="'account'">
			 		   <chart-pie style="height: 100px;" :value="pieData" text="用户访问来源"></chart-pie>
			      </databox>
							</Col>
						</Row>
        </Col>
				<Col span="6" >
			     	<Row :gutter="16">
              <Col span="24" >
							   <databox :title="''" :dheight="100" :icon="'account'">
			 		   <chart-pie style="height: 100px;" :value="pieData" text="用户访问来源"></chart-pie>
			      </databox>
							</Col>
						</Row>
						<Row :gutter="16">
              <Col span="24" >
							   <databox :title="''" :dheight="100" :icon="'account'">
			 		   <chart-pie style="height: 100px;" :value="pieData" text="用户访问来源"></chart-pie>
			      </databox>
							</Col>
						</Row>
						<Row :gutter="16">
              <Col span="12" v-for="(role,index) in 4" :key="index">
							   <databox :title="''" :dheight="100" :icon="'account'">
			 		   <chart-pie style="height: 100px;" :value="pieData" text="用户访问来源"></chart-pie>
			      </databox>
							</Col>
						</Row>
        </Col>
				<Col span="9">
           <Row :gutter="16">
              <Col span="24" >
							   <databox :title="''" :dheight="200" :icon="'account'">
			 		   <chart-pie style="height: 100px;" :value="pieData" text="用户访问来源"></chart-pie>
			      </databox>
							</Col>
						</Row>
           <Row :gutter="16">
              <Col span="24">
							   <databox :title="''" :dheight="100" :icon="'account'">
			 		   <chart-pie style="height: 100px;" :value="pieData" text="用户访问来源"></chart-pie>
			      </databox>
							</Col>
						</Row>
						<Row :gutter="16">
              <Col span="24" >
							   <databox :title="''" :dheight="100" :icon="'account'">
			 		   <chart-pie style="height: 100px;" :value="pieData" text="用户访问来源"></chart-pie>
			      </databox>
							</Col>
						</Row>
        </Col>
				
    </Row>


    <Row :gutter="16">
        <Col span="12" >
        <!-- <Card shadow> -->
        <databox :title="''" :dheight="300" :icon="'account'">
			 		<chart-bar style="height: 300px;" :value="barData" text="用户访问来源"></chart-bar>
			   </databox>
         <!-- </Card> -->
        </Col>
        <Col span="12" >
        <!-- <Card shadow> -->
        <databox :title="''" :dheight="300" :icon="'account'">
			 		<chart-bar3d style="height: 300px;" :value="barData" text="用户访问来源"></chart-bar3d>
			   </databox>
         <!-- </Card> -->
        </Col>
    </Row>

		<dheader></dheader>
		<topnav></topnav>
		<div class="data-content">
			<div class="data-time">
				 温馨提示: 后续还会继续加功能，请关注我github更新...
			</div>
			<div class="data-main">
				<div class="main-left">
				  <dleft :personalData="personalData" :username="username"></dleft>
				</div>
				<div class="main-center">
					<dcontent :numberData="numberData" :username="username"></dcontent>
				</div>
				<div class="main-right">
					<dright :username="username"></dright>
				</div>
			</div>
		</div>
		<nouser :isShow="isShow"  v-if="isShow"></nouser>
		<loading v-if="pageShow"></loading>
	</div>
</template>

<script>
import dheader from './dheader'
import dleft from './dleft'
import dcontent from './dcontent'
import dright from './dright'
import { ChartPie, ChartBar, ChartRadar, ChartScatter, ChartMap } from '_c/charts'
import { ChartBar3d} from '_c/charts3d'

import echarts from 'echarts'

export default {
  components:{
  	dheader,
  	dleft,
  	dcontent,
    dright,
    ChartPie,
    ChartBar,
    ChartRadar,
    ChartScatter,
    ChartMap,
    ChartBar3d
  },
  data(){
  	return{
  		isShow:false,
  		pageShow:true,
  		personalData:{},
  		numberData:{},
      username:"",
      pieData: [
        {value: 335, name: '直接访问'},
        {value: 310, name: '邮件营销'}
        // {value: 234, name: '联盟广告'},
        // {value: 135, name: '视频广告'},
        // {value: 1548, name: '搜索引擎'}
      ],
      barData: {
        Mon: 13253,
        Tue: 34235,
        Wed: 26321,
        Thu: 12340,
        Fri: 24643,
        Sat: 1322,
        Sun: 1324
      }
  	}
  },
  created(){
  	let username = this.$route.params.user
    this.getData(username)
  },
  methods:{
  	getData(username){ 
  		let self = this
        this.$axios.get('/api/users/'+ username).then((response)=>{
            let res = JSON.parse(JSON.stringify(response))
            if(res.status === 200){
            	this.username = username
          	    let data = res.data
          	    //个人图片、加入github时间
          	    let sinceDate = data.created_at
          	    let joinDate = sinceDate.substring(0,10)
          	    let img   = data.avatar_url
          	    let objP  = {
          	    	username: username,
          	    	joinDate: joinDate,
          	    	img: img
          	    }
          	    this.personalData = objP
          	    
          	    //仓库数、粉丝数、跟随数
          	    let pubRepos = data.public_repos
          	    let followers = data.followers
          	    let following = data.following
          	    let objN  = {
          	    	pubRepos: pubRepos,
          	    	followers: followers,
          	    	following: following
          	    }
          	    this.numberData = objN
          	    
          	    this.pageShow = false
			    }   
			   
			return
              
		    }).catch(err => {
		    	this.pageShow = false
		    	this.isShow = true
				console.log(err.message);
			})
  	}
  	//计算年月
//	joindate(sinceDate){
//      var since = sinceDate.getFullYear();
//      var sinceMonth = sinceDate.getMonth();
//      return since + "-" + sinceMonth
//	}
  }
}
</script>

<style lang="scss">
.data-page{
	background: url(../../assets/data/true.png) repeat;
	top: 0;
	right: 0;
	right: 0;
	bottom: 0;
	height: 100%; 
    min-width: 1220px;
	.data-content {
	    padding-top: 20px;
	    padding-bottom: 20px;
	   .data-time {
		    width: 340px;
		    height: 35px;
		    background-color: #2C58A6;
		    line-height: 35px;
		    color: #fff;
		    font-size: 12.8px;
		    margin-bottom: 25px;
		    margin-left: 20px;
		    text-align: center;
		}
		.data-main {
		    width: calc(100% - 40px);
		    margin-bottom: 40px;
		    margin-left: 20px;
		    height: 720px;
		    
		    
		    .main-left{
		    	width: 24%;
		    	float: left;
		    }
		     .main-center{
		    	float: left;
		    	width: 52%;
		    	padding: 0 20px 0 20px;
		    	
		    }
		     .main-right{
		     	float: left;
		    	width: 24%;
		    	 height: 615px;
		    }
		}
	}		
}

</style>